<!DOCTYPE html>

<html>
<head>
<title>#{get 'title' /}</title>
<meta charset="UTF-8">
<link rel="stylesheet" media="screen"
	href="@{'/public/stylesheets/main.css'}">
<link rel="stylesheet" media="screen"
	href="@{'/public/stylesheets/bootstrap.css'}">
<link rel="stylesheet" media="screen"
	href="@{'/public/stylesheets/social-buttons.css'}">
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png"
	href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.9.1.js'}"
	type="text/javascript" charset="UTF-8"></script>
<script src="@{'/public/javascripts/bootstrap.js'}"
	type="text/javascript" charset="UTF-8"></script>
<link
	href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css"
	rel="stylesheet">
<script src="@{'/public/javascripts/floating-windows.js'}"
	type="text/javascript" charset="UTF-8"></script>
#{get 'moreScripts' /}
<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });
  </script>
</head>

<body background="/public/img/bj3.jpg">

	#{include 'SaladController/index.html' /} #{include
	'Application/loginWindow.html' /} #{include
	'Application/myAccountTab.html' /} #{include
	'Application/purchaseError.html' /} #{include
	'Application/purchaseSuccess.html' /} #{include
	'Application/nutritionDetails.html' /}
	<div class="container">

		<div class="row white">
			<div class="span3">
				<img src="/public/img/logo2.jpg" class="" height="50" width="150">
			</div>
			<div class="span6">
				<div class="nav">
					<ul class="nav nav-tabs">
						<li><a href="/">Home</a></li>
						<li><a href="aboutus.html">About us</a></li>
						<li><a href="contactus.html">Contact us</a></li>
						<li><a href="faq.html">FAQ</a></li>
						<li><a href="privacy.html">Privacy</a></li>

					</ul>
				</div>
			</div>

			<div class="span3">
				#{if !session.get("UserId")} <a href="#loginWindowModal"
					role="button" class="btn btn-primary" data-toggle="modal">Sign
					in</a> #{/if} #{else} <a href="#myAccountModal" role="button"
					class="btn btn-primary" data-toggle="modal">My account</a> <a
					href="@{logoutUser()}">
					<button class="btn btn-primary">Logout</button>
				</a> #{/else}
			</div>
		</div>

		<div class="row white">
			<div class="span9 white">#{doLayout /}</div>
			<div class="span3 white">#{include
				'Application/shoppingCart.html' /}</div>
		</div>
		<div class="row white">
			<div class="span3"></div>
			<div class="span6">
				<div class="nav">
					<ul class="nav nav-tabs">
						<li><a href="/">Home</a></li>
						<li><a href="aboutus.html">About us</a></li>
						<li><a href="contactus.html">Contact us</a></li>
						<li><a href="faq.html">FAQ</a></li>
						<li><a href="privacy.html">Privacy</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" charset="UTF-8">
	
		function deleteFromCart(id) {
			var deleteFromCartAction = #{jsAction @deleteFromCart(':lineId') /};
			jQuery.post( deleteFromCartAction( { lineId: id} ) , function() {
	      	  // REload car after adding the product
		  	  refreshCart();
	    	});
		}
			    
			//Scroll the messages panel to the end
			var addToCartAjax = function(id) {
				var addToCartAction = #{jsAction @addToCart(':productId') /}
				jQuery.post( addToCartAction( { productId: id} ) , function() {
			      	  // Reload cart after adding the product
			      	  refreshCart()
			      });
			}    
			 
		    function addToCart(id) {
		    	addToCartAjax(id)        
		    }
		    
		    var onRefreshCart = function() {
				// show discount if pickup is selected
		      	if ($('#pickupDelivery').prop("checked", true)) {
		      		showDiscount();
		      	}
		    }
		    
		    var onRefreshNutritionDetails = function() {
		    }
		    
		    var refreshCart = function() {
				var shoppingCartAction = #{jsAction @shoppingCartTotal() /}
				$('#result').load(shoppingCartAction(), onRefreshCart);
				var nutritionDetailsAction = #{jsAction @nutritionDetails() /}
				$('#nutritionDetailsResult').load(nutritionDetailsAction(), onRefreshNutritionDetails);
			}
		    
		    refreshCart();
		</script>
</body>
</html>